<template>
    <div class="background-image">
        <div class="content">
            <div class="main">
                <div class="left"></div>
                <div class="right">
                    <div class="top">
                        <div class="big">
    <li>欢迎注册</li>
    </div>
    <div class="small">
    <li class="li1"><router-link to="/login"><span>返回首页</span></router-link></li>
    </div>
    </div>
    <div class="con">
        <form @submit.prevent="validate" class="form">
            <div class="text">
                <table class="table">
                    <tr>
                        <div class="input-container">
                            <img src="../../assets/用户名.png" alt="Image">
                            <input v-model="user.username" type="text" placeholder="请输入您的用户名">
                            <span v-if="errors.username" class="error">{{ errors.username }}</span>
                        </div>
                    </tr>
                    <tr>
                        <div class="input-container">
                            <img src="../../assets/password.png" alt="Image">
                            <input v-model="user.password" type="password" placeholder="请输入您的新密码">
                            <span v-if="errors.password" class="error">{{ errors.password }}</span>
                        </div>
                    </tr>
                    <tr>
                        <div class="input-container">
                            <img src="../../assets/password.png" alt="Image">
                            <input v-model="user.confirmPassword" type="password" placeholder="请确定您的新密码">
                            <span v-if="errors.confirmPassword" class="error">{{ errors.confirmPassword }}</span>
                        </div>
                    </tr>
                    <tr>
                        <div class="input-container">
                            <img src="../../assets/联系方式.png" alt="Image">
                            <input v-model="user.contact" type="text" placeholder="请输入您的联系方式">
                            <span v-if="errors.contact" class="error">{{ errors.contact }}</span>
                        </div>
                    </tr>
                    <tr>
                        <div class="input-container">
                            <img src="../../assets/单位.png" alt="Image">
                            <input v-model="user.unit" type="text" placeholder="请输入您的所属单位">
                            <span v-if="errors.unit" class="error">{{ errors.unit }}</span>
                        </div>
                    </tr>
                    <tr>
                        <div class="input-container">
                            <img src="../../assets/真实姓名.png" alt="Image">
                            <input v-model="user.fullName" type="text" placeholder="请输入您的真实姓名">
                            <span v-if="errors.fullName" class="error">{{ errors.fullName }}</span>
                        </div>
                    </tr>
                </table>
                <input type="submit" value="确 认" class="login" />
            </div>
        </form>
    </div>
    </div>
    </div>
    </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: '',
        password: '',
        confirmPassword: '',
        contact: '',
        unit: '',
        fullName: ''
      },
      errors: {} // 用于存储错误信息
    };
  },
  methods: {
    validate() {
      this.errors = {}; // 清空之前的错误信息
      // 验证是否为空
      for (const field in this.user) {
        if (!this.user[field]) {
          this.errors[field] = '该项为空';
        }
      }
      // 验证联系方式
      if (this.user.contact && this.user.contact.length !== 11) {
        this.errors.contact = '非合法输入';
      }
      // 验证密码是否一致
      if (this.user.password !== this.user.confirmPassword) {
        alert('两次密码输入不同，请重新确认');
        return;
      }
      // 如果没有错误信息，则提交表单
      if (Object.keys(this.errors).length === 0) {
        console.log('Form submitted', this.user);
        // 这里可以添加发送数据的逻辑
      }
    }
  }
};
</script>




<style scoped>
    .background-image {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        position: fixed;
        top: 0;
        left: 0;
        background-color: #fff; /* 背景色，可根据需要调整 */
        z-index: 0; /* 背景层 */
    }

        .background-image::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("../../assets/Register_bg.jpg") center/cover no-repeat;
            z-index: -1; /* 确保伪元素在背景层之下 */
            filter: blur(8px);
        }

    .content {
        display: flex; /* 使.content成为flex容器 */
        justify-content: center; /* 水平居中main元素 */
        align-items: center; /* 垂直居中main元素 */
        height: 100%; /* 使.content的高度占满其父元素 */
        /* 如果需要，可以设置width: 100%来使.content宽度占满其父元素 */
    }

        .content .main {
            width: 1000px;
            height: 600px;
            background-color: #FFFFFF;
            border-radius: 10px;
        }

            .content .main .left {
                margin: 0;
                padding: 0;
                width: 55%;
                height: 100%;
                background-image: url("../../assets/Register_bg.jpg");
                background-size: cover;
                background-position: 65%; /* 将背景图片重点内容向右对齐 */
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
                float: left;
                /* overflow: hidden; */
            }


            .content .main .right {
                margin: 0;
                padding: 0;
                width: 45%;
                height: 100%;
                background-size: cover;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
                float: left;
            }

                .content .main .right .top {
                    width: 100%;
                    height: 20%;
                    border-bottom: 1px solid #4a4a4a;
                }

                    .content .main .right .top li {
                        list-style: none;
                    }

                    .content .main .right .top .big {
                        width: 50%;
                        height: 100%;
                        float: left;
                    }

                        .content .main .right .top .big li {
                            display: block;
                            padding-top: 30%;
                            padding-left: 10%;
                            font-size: 40px;
                            color: #00A2E8;
                        }

                    .content .main .right .top .small {
                        width: 20%;
                        height: 100%;
                        float: right;
                    }

                        .content .main .right .top .small li {
                            display: block;
                            padding-top: 105%;
                            padding-left: 10%;
                            font-size: 18px;
                            color: gray;
                        }

    a {
        text-decoration: none; /* 去除下划线 */
        color: gray; /* 设置链接颜色，可以是任何你想要的颜色 */
    }

        a:visited {
            color: gray; /* 访问过的链接颜色保持不变 */
        }

    .con {
        float: left;
        margin-top: 50px;
        margin-left: 25%;
    }

    .input-container {
        position: relative;
        display: flex;
        align-items: center;
        width: 300px;
    }

        .input-container input {
            /*flex-grow: 1;*/
            padding-left: 40px; /* 确保有足够的空间显示图片 */
            width: 180px;
            padding-top: 10px;
            /* padding-right: 10px; */
            padding-bottom: 10px;
            border: none;
            border-radius: 4px;
            box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, 0.2);
            outline: none;
            color: dimgray;
            margin-bottom: 15px;
        }

        .input-container img {
            position: absolute;
            left: 10px; /* 调整图片位置 */
            top: 30%;
            transform: translateY(-50%);
            height: 20px; /* 调整图片大小 */
            width: auto;
        }

    .login {
        margin-top: 10%;
        /* padding: 8px 50px; */
        padding-left: 40px;
        padding-right: 30px;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: center;
        float: left;
        margin-left: 10%;
        font-size: 25px;
        background-color: #00A2E8;
        color: #FFFFFF;
        border-radius: 10px;
        border: 1px;
        font-weight: bold;
        letter-spacing: 20px;
    }

        .login:hover {
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
            background-color: #9ED3F0;
            color: black;
            font-weight: bolder;
        }

    .error {
        width:80px;
        color: red;
        font-size: 12px;
        display: block;
        margin-top: 5px;
    }
</style>